<template>
  <div>
    <div >
      <div class="box">
        <div class="box-left">
          <input type="checkbox"  :id="'cd'+id"  :checked="state" @change="stateChange">
          <img :src="pic" alt="">
        </div>
         <label class="box-right" :for="'cd'+id">
           <h5>{{title}}</h5>
           <p class="money">￥{{price}}</p>
         </label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkbox:true
    } 
  },
  methods: {
    //change是复选框的自带方法,只要他的状态发生变化
    //就会触发函数 
    stateChange(e) {
      // console.log(e)
      const newState = e.target.checked
      // console.log(newState);
      // console.log(this.id);
      //触发自定义事件
      this.$emit('countChange',{id:this.id,value:newState})
    }
  },
  props:{ 
    id:{
      required:true,
      type:Number
    },
    title:{
      default:'',
      type:String
    },
    pic:{
      default:'',
      type:String
    },
    price:{
      default:0,
      type:Number
    },
    state:{
      default:true,
      type:Boolean
    }
  },

}
</script>

<style scoped>
  .box {
    display: flex;
    height: 150px;
  }
  .box-left {
     display: flex;
     align-content: center;
     align-items: center;
  }
  .box-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .box-right  {
    margin-left: 15px;
  }
    .box-right p {
      color: red;
      font-weight: 600;
    }
</style>